﻿@{
    ViewBag.PageTitle = "新闻资讯 " + ViewBag.site.SeoTitle;
    ViewBag.PageKeyword = ViewBag.site.SeoKeyword;
    ViewBag.PageDescription = ViewBag.site.SeoDescription;
}
<!--新闻资讯.开始-->
<div class="news-focus wrapper">
    <div class="banner">
        <div class="news-index-container swiper-container">
            <div class="swiper-wrapper">
                <a v-for="(item,index) in focusList" :key="index" class="swiper-slide" :href="'/news/show/'+item.id">
                    <div class="img-box">
                        <img :src="common.loadFile(item.imgUrl)">
                    </div>
                    <div class="txt-box">
                        <span>{{item.title}}</span>
                    </div>
                </a>
            </div>
            <div class="swiper-pagination"></div>
        </div>
    </div>
    <div class="img-list">
        <div class="picture-list">
            <a v-for="(item,index) in newList" :key="index" v-if="index<2" class="list-box" :href="'/news/show/'+item.id">
                <div class="img-box">
                    <el-image :src="common.loadFile(item.imgUrl)" fit="cover"></el-image>
                </div>
                <div class="txt-box">
                    <span class="text">{{item.title}}</span>
                </div>
            </a>
        </div>
    </div>
    <div class="txt-list">
        <div class="ftitle">
            <span class="h5">热点新闻</span>
            <a href="/news/list" class="more link">
                <span class="icon iconfont icon-right-arrow"></span>
            </a>
        </div>
        <a v-for="(item,index) in newList" :key="index" v-if="index>=2" class="list-box" :href="'/news/show/'+item.id">
            <div class="title"><span class="label">{{item.labelTitle.split(',')[0]}}</span>{{item.title}}</div>
            <div class="info">
                <span>{{item.addTime}}</span>
                <span class="line">{{item.source}}</span>
            </div>
        </a>
    </div>
</div>
<!--新闻资讯.结束-->
<!--分类菜单.开始-->
<div class="wrapper">
    <div class="slider-nav">
        <div class="list-box">
            <span class="title">类别</span>
            <div class="list">
                <a v-for="(item,index) in categoryList" :key="index" :href="'/news/list/'+item.id">{{item.title}}</a>
            </div>
        </div>
    </div>
</div>
<!--分类菜单.结束-->
<!--标签列表.开始-->
<div v-for="(item,index) in articleList" :key="index" class="wrapper">
    <div class="ntitle">
        <div class="h3">{{item.title}}</div>
        <a :href="'/news/list/'+item.id" class="more">
            <span>更多</span>
            <span class="icon iconfont icon-right-arrow"></span>
        </a>
    </div>
    <div class="news-index">
        <a v-for="(article,sindex) in item.data" :key="sindex" class="list-box" :href="'/news/show/'+article.id">
            <div class="left-box">
                <span class="title">{{article.title}}</span>
                <span class="info">{{article.zhaiyao}}</span>
                <span class="date iconfont icon-date">{{article.addTime}} · {{article.source}}</span>
            </div>
            <div class="img-box">
                <el-image :src="common.loadFile(article.imgUrl)" fit="cover"></el-image>
            </div>
        </a>
    </div>
</div>
<!--标签列表.结束-->

@section Scripts{
    <script>
        //初始化VUE
        var ve = new Vue({
            el: '#app',
            data: {
                focusList: [], //新闻幻灯
                categoryList: [],
                newList: [],
                articleList: []
            },
            methods: {
                //初始化数据
                async initData() {
                    let _this = this;
                    //加载分类
                    AxiosAjax({
                        url: `/client/article/news/category?siteId=${$site}`,
                        success: function (res) {
                            _this.categoryList = res.data;
                        }
                    });
                    //新闻幻灯片
                    AxiosAjax({
                        url: `/client/article/view/channel/news/5?labelId=4&siteId=${$site}`,
                        success: function (res) {
                            _this.focusList = res.data;
                            _this.$nextTick(() => {
                                _this.initSwiper();
                            });
                        }
                    });
                    //最新列表
                    AxiosAjax({
                        url: `/client/article/view/channel/news/7?siteId=${$site}`,
                        success: function (res) {
                            _this.newList = res.data;
                        }
                    });
                    //文章分类列表
                    AxiosAjax({
                        url: `/client/article/view/news/3/4?siteId=${$site}`,
                        success: function (res) {
                            _this.articleList = res.data;
                        }
                    });
                },
                //初始化幻灯片
                initSwiper() {
                    new Swiper('.news-index-container', {
                        autoplay: true,//可选选项，自动滑动
                        loop: true, //循环模式选项
                        observer: true, //检测变化
                        //如果需要分页器
                        pagination: {
                            el: '.swiper-pagination',
                        },
                    });
                }
            },
            created() {
                this.initData();
            }
        })
    </script>
}